package showcase

import "github.com/templui/templui/internal/components/avatar"

templ AvatarGroup() {
	<div class="flex -space-x-3 *:ring-2 *:ring-background">
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "User avatar",
			})
			@avatar.Fallback() {
				AA 
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "User avatar",
			})
			@avatar.Fallback() {
				BB 
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "User avatar",
			})
			@avatar.Fallback() {
				CC 
			}
		}
		@avatar.Avatar(avatar.Props{
			Class: "text-muted-foreground",
		}) {
			@avatar.Fallback() {
				+2 
			}
		}
	</div>
}
